<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="html" uri="http://struts.apache.org/tags-html"%>
<%@ taglib prefix="bean" uri="http://struts.apache.org/tags-bean"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<script type="text/javascript">
	/**
	 * Activates the show button
	 */
	function enableButtons() {
		document.getElementById("showButton").disabled = false;
	}

	/**
	 * Deactivates the show button.
	 */
	function deactivateButtons() {
		document.getElementById("showButton").disabled = true;
	}
	
	/**
	* Set the Radio-Buttons Invisble
	*/
	function invisbleRadio() {
		if(document.departmentForm.selectedKey.value==null){
			for (i=0; i<document.departmentForm.selectedKey.length; i++){
				document.departmentForm.selectedKey[i].style.display = "none";
			}
		}else{
			document.departmentForm.selectedKey.style.display ="none";
		}
	}
	
	/**
	* Realize the line-chooser
	*/
	function selectRow(deptId) {
		document.getElementById(deptId).className = "markedRow";
		// all others in evenRow or oddRow
		var classOfRow = 'oddRow';
		if(document.departmentForm.selectedKey.value==null){
			for (i=0; i<document.departmentForm.selectedKey.length; i++){
				if(classOfRow=='evenRow'){
					classOfRow='oddRow';
				}else{
					classOfRow='evenRow';
				}
				if (document.departmentForm.selectedKey[i].value==deptId){
					document.departmentForm.selectedKey[i].checked = true;
				}else{
					document.getElementById(document.departmentForm.selectedKey[i].value).className = classOfRow;
				}
			}
		}else{
			document.departmentForm.selectedKey.checked = true;
		}
		enableButtons();
	}
</script>

<html:form action="/voDepartment">
	<span style="color: #FF0000; size: 14pt;"><bean:message key="${sessionScope.departmentForm.errorCode}" /></span><br />
	<h1><bean:message key="heading.departmentList" /></h1>
	<p><bean:message key="text.departmentList" /></p>
	
	<table class="listTable" width= "100%">
		<tr>
			<th style="width: 30px;">&nbsp;</th>
			<th><bean:message key="label.city" /></th>
			<th><bean:message key="label.street" /></th>
			<th><bean:message key="label.chief" /></th>
			<th><bean:message key="label.telephone" /></th>
			<th><bean:message key="label.homepageURL" /></th>		
		</tr>
		<c:forEach var="department" items="${sessionScope.departmentForm.departments}"
			varStatus="rowStatus">
			<tr id="${department.deptId}" class="${(rowStatus.count % 2 == 0) ? 'oddRow' : 'evenRow'}"
				onclick="selectRow(${department.deptId})">
				
				<td style="width: 30px; text-align: center;">
					<html:radio property="selectedKey" value="${department.deptId}" />
				</td>
				<td>${department.zipcode} ${department.city}</td>
				<td>${department.street} ${department.houseNumber}</td>
				<td>${department.chief}</td>
				<td>${department.telephoneNumber}</td>
				<td>${department.homepageURL}</td>
			</tr>
		</c:forEach>
	</table>
	<html:submit styleId="showButton" property="method">
		<bean:message key="button.show" />
	</html:submit>
</html:form>